<template>
  <div class="page-wrap">
    <span class="cc">详情页：{{ route.params.id }}</span>
    <el-button @contextmenu.prevent="showMenu">右键触发菜单</el-button>

    <!-- 右键菜单组件 -->
    <RightMenu
      ref="menuRef"
      :menu-list="menus"
      :menu-width="160"
      :submenu-width="200"
      :border-radius="10"
      @select="handleSelect"
      @show="onMenuShow"
      @hide="onMenuHide"
    />
  </div>
</template>

<script setup>
const route = useRoute();

const menuRef = ref(null);
const lastAction = ref('');
const menus = ref([
  {
    key: 'copy',
    label: '复制',
    icon: '&#xe7b2;',
  },
  {
    key: 'paste',
    label: '粘贴',
    icon: '&#xe70b;',
  },
  {
    key: 'cut',
    label: '剪切',
    icon: '&#xe7b8;',
    showLine: true,
  },
  {
    key: 'export',
    label: '导出选项',
    icon: '&#xe78b;',
    children: [
      {
        key: 'exportExcel',
        label: '导出 Excel',
        icon: '&#xe604;',
      },
      {
        key: 'exportPdf',
        label: '导出 PDF',
        icon: '&#xe89e;',
      },
    ],
  },
  {
    key: 'edit',
    label: '编辑选项',
    icon: '&#xe706;',
    children: [
      {
        key: 'rename',
        label: '重命名',
        icon: '&#xe607;',
      },
      {
        key: 'duplicate',
        label: '复制副本',
        icon: '&#xe608;',
      },
    ],
  },
  {
    key: 'share',
    label: '分享',
    icon: '&#xe73b;',
    showLine: true,
  },
  {
    key: 'delete',
    label: '删除',
    icon: '&#xe850;',
  },
  {
    key: 'disabled',
    label: '禁用选项',
    icon: '&#xe619;',
    disabled: true,
  },
]);
const showMenu = (e) => {
  console.log('触发右键菜单', e);
  // 确保阻止默认行为
  e.preventDefault();
  e.stopPropagation();

  // 延迟一帧执行，确保事件处理完成
  nextTick(() => {
    menuRef.value?.show(e);
  });
};

const onMenuShow = () => {
  console.log('菜单显示');
};

const onMenuHide = () => {
  console.log('菜单隐藏');
};
const handleSelect = (item) => {
  lastAction.value = `${item.label} (${item.key})`;
  window.$message.success(`执行操作: ${item.label}`);
  console.log('选择了菜单项:', item);
};
</script>

<style scoped></style>
